<%--
  Created by IntelliJ IDEA.
  User: 乔见东方姑娘
  Date: 2023/10/9
  Time: 22:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>我的购物车</title>
    <style>
        #main {
            width: 50%;
            margin: 0 auto;
        }
    </style>
<%--    <script>--%>
<%--        $(document).ready(function () {--%>
<%--            $("#decrease").click(function (d){--%>
<%--                const count = $("#quantity").value;--%>

<%--            })--%>
<%--        })--%>
<%--    </script>--%>
    <script src="/static/js/main.js"></script>
    <script src="/static/js/jquery-3.7.0.js"></script>
</head>
<body>

<div id="main">
    <table>
        <tr>
            <td><input type="checkbox">是否全选</td>
            <td>商品名称</td>
            <td>商品单价</td>
            <td>购买数量</td>
            <td>该商品总价</td>
        </tr>

        <c:forEach items="${sessionScope.list}" var="shopping" varStatus="status">
            <tr>
                <td><input type="checkbox" value="${shopping.gid}"></td>
                <td>${shopping.title}</td>
                <td><span class="price">${shopping.price}</span></td>
                <td>
                    <span class="countText" style="font-size: 16px">数量</span>
                    <input type="button" class="decrease" value="-">
                    <input type="text" class="quantity" value="${shopping.count}" style="width: 30px"/>
                    <input type="button" class="increase"  onclick="addShopping()"  value="+">
                </td>
                <td class="goodsTotal">
                    <span id="${shopping.gid}">${shopping.total}</span>
                </td>
            </tr>
        </c:forEach>
        <tr>
            <td colspan="2" style="text-align: center">总价</td>
            <td colspan="2" style="text-align: center"><span id="sum">0</span></td>
            <td><input type="submit" style="text-align: center">确认购买</td>
        </tr>

    </table>
</div>
<script>
    //获取所有+按钮
    var increment = document.getElementsByClassName("increase");
    for (var i = 0; i < increment.length; i++) {
        //为a标签添加index属性，用于记录下标
        increment[i].index = i;
        //点击+数量增加的功能函数
        increment[i].onclick = function () {
            var flag = this.index;
            //获取当前按钮对应的数量框
            var q = document.getElementsByClassName("quantity")[flag];
            var newvalue = parseInt(q.value) + 1;
            q.setAttribute('value', newvalue);
            //更新此商品对应的‘小计’
            // changeSum(flag, newvalue);
        }
    }
    //获取所有-按钮
    var decrement = document.getElementsByClassName('decrease');
    //点击-数量减少的功能函数
    for (var j = 0; j < decrement.length; j++) {
        decrement[j].index = j;
        decrement[j].onclick = function () {
            var flag = this.index;
            //获取当前a标签对应的那个数量框
            var q = document.getElementsByClassName("quantity")[flag];
            if (parseInt(q.value) > 0) {
                var newvalue = parseInt(q.value) - 1;
                q.setAttribute('value', newvalue);
                // changeSum(flag,newvalue);
            }
        }
    }
</script>

</body>
</html>